<template>
  <el-form ref="form" :model="form" label-width="80px">
    <div v-for="(item,index) in formData" :key="index">

      <div v-if="item.type == 'input'">
        <el-form-item :label="item.label" :rules="item.required">
          <el-input v-model="item.value" :name="item.name" :placeholder="item.placeholder"></el-input>
        </el-form-item>
      </div>

      <div v-else-if="item.type == 'select'">
        <el-form-item :label="item.label" :rules="item.required">
          <el-select v-model="item.value">
            <div v-for="(v,i) in item.data" :key="i">
              <el-option :label="v" :value="v"></el-option>
            </div>
          </el-select>
        </el-form-item>
      </div>

      <div v-else-if="item.type == 'textarea'">
        <el-form-item :label="item.label" :rules="item.required">
          <el-input type="textarea" v-model="item.value" :name="item.name"></el-input>
        </el-form-item>
      </div>

      <div v-else-if="item.type == 'switch'">
        <el-form-item :label="item.label" :rules="item.required">
          <el-switch v-model="item.value" name="item.name"></el-switch>
        </el-form-item>
      </div>

      <div v-else-if="item.type == 'checkbox'">
        <el-form-item :label="item.label" :rules="item.required">
          <el-checkbox-group v-model="item.value">
            <el-checkbox v-for="v in item.data" :label="v" :key="v" :name="item.name"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>

      <div v-else-if="item.type == 'radio'">
        <el-form-item :label="item.label" :rules="item.required">
          <el-radio-group v-model="item.value">
            <el-radio v-for="v in item.data" :label="v" :key="v"></el-radio>
          </el-radio-group>
        </el-form-item>
      </div>

      <!-- 关联会议 -->
      <div v-else-if="item.type == 'component' && item.name == 'is_associated_meeting'" style="margin-bottom: 5px">
        <el-form-item :label="item.label">
          <el-input
              type="text"
              v-model="item.config_value"
              :name="item.name"
              :disabled="true"
          ></el-input>
        </el-form-item>
      </div>
      <!-- 报名人数 -->
      <div v-else-if="item.type == 'component' && item.name == 'signup_num'" style="margin-bottom: 5px">
        <div v-for="(it,idx) in item.data" :key="idx">
          <el-form-item :label="it.label">
            <el-input type="text" v-model="it.value"></el-input>
          </el-form-item>
        </div>
        <div v-if="item.value == true || item.value == 'true'">
          <el-button type="primary">+ 新增人员</el-button>
        </div>
      </div>

      <div v-else-if="item.type == 'component' && item.name == 'is_stay'" style="margin-bottom: 5px">
        <div v-for="(it,idx) in item.data" :key="idx">
          <div>日期：{{ it.dayTime }}</div>
          <div>单间</div>
          <div>{{ it.nameOne.roomNum }}间</div>
          <div>{{ it.nameOne.roomPrice}}元</div>
          <div>标间</div>
          <div>{{ it.nameTwo.roomNum }}间</div>
          <div>{{ it.nameTwo.roomPrice}}元</div>
          <div>拼住</div>
          <div></div>
        </div>
      </div>
      <div v-else-if="item.type == 'component' && item.name == 'is_invoice'" style="margin-bottom: 5px">
        <div v-for="(it,idx) in item.data" :key="idx">
          <el-form-item :label="it.label">
            <el-input type="text" v-model="it.value"></el-input>
          </el-form-item>
        </div>
      </div>
    </div>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import {submitContent2} from "@/api";

export default {
  name: "submitForm",
  props: ['formData', 'form', 'form_id'],
  data() {
    return {
      currentSort: '',
    }
  },
  methods: {
    onSubmit() {
      console.log(this.formData)
      let data = {
        form_id: this.form_id,
        user_id: 2,
        data: this.formData
      }
      submitContent2(data).then(response => {
        console.log(response)
        this.$message(response.msg)
      }).catch(error => console.log(error))
    },
  }
}
</script>

<style scoped>

</style>
